<!--  -->
<template>
    <el-dialog v-model="isOpen" width="800" title="预测结果" :border="true" align-center>
        <div class="util flex-row">
            <div class="operation">
                <el-form label-position="top">
                    <el-form-item label="周期单位数">
                        <el-select v-model="windowSize" @change="showEchart">
                            <el-option v-for="(i,index) in result.x" :value="index+1" :label="index+1" />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-input-number v-model="currentMaxX" :min="sourceMaxX" @change="showEchart" />
                    </el-form-item>
                </el-form>
            </div>

            <div ref="chartContainer" style="width: 100%;height: 400px;" />
        </div>
    </el-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from "vue"
import * as echarts             from "echarts"

let isOpen = defineModel()
let props  = defineProps([ "result" ])

let windowSize  = ref(3)
let sourceMaxX  = ref(0)
let currentMaxX = ref(0)

watch(isOpen, (newValue) => {
    if(newValue){
        sourceMaxX        = Math.max(...props.result.x)
        currentMaxX.value = sourceMaxX

        showEchart()
    }
})

let chartContainer = ref(null)
let chartInstance  = ref(null)

watch(chartContainer, (val) => {
    if(val){
        chartInstance.value = echarts.init(chartContainer.value)
    }
    else{
        chartInstance.value?.dispose()
    }
})

function _calculate(){
    let xData = [ ...props.result.x ]
    let yData = [ ...props.result.y ]

    for(let i = sourceMaxX + 1; i <= currentMaxX.value; i++){
        xData.push(i)
    }

    for(let i = yData.length; i < xData.length; i++){
        // 计算前windowSize个值的均值
        let startIndex = Math.max(0, i - windowSize.value)
        let sum        = 0
        let count      = 0
        for(let j = startIndex; j < i; j++){
            if(yData[j] !== undefined){
                sum += Number(yData[j])
                count++
            }
        }

        let y = count > 0 ? sum / count : 0
        yData.push(y)
    }

    return { xData, yData }
}

function showEchart(){
    nextTick(() => {
        if(chartInstance.value){
            let { xData, yData } = _calculate()

            // 创建颜色数组，原始数据为默认色，预测数据为红色
            let barColors  = yData.map((_, index) =>
                xData[index] > sourceMaxX ? "#ff0000" : "#5470c6",
            )
            let lineColors = yData.map((_, index) =>
                xData[index] > sourceMaxX ? "#ff0000" : "#51ff00",
            )

            let option = {
                xAxis  : {
                    type: "category",
                    data: xData,
                },
                yAxis  : {
                    type: "value",
                },
                series : [
                    {
                        type     : "bar",
                        data     : yData,
                        itemStyle: {
                            color: (params) => barColors[params.dataIndex],
                        },
                    },
                    {
                        type     : "line",
                        data     : yData,
                        lineStyle: {
                            color: (params) => lineColors[params.dataIndex],
                        },
                        itemStyle: {
                            color: (params) => lineColors[params.dataIndex],
                        },
                    },
                ],
                tooltip: {
                    show: true,
                },
            }
            chartInstance.value.setOption(option)

            window.onresize = function(){
                chartInstance.value.resize()
            }
        }
    })
}
</script>

<style lang="scss" scoped>
.util {
    width: 100%;

    .operation {
        width: 200px;
    }

    .echart {
        width: 600px;
    }
}

</style>
